<template>
<div class="my-account abs full">
    <div class="rel full overflow-x-hidden">
        <div>
            <div class="card card-valid-t" v-if="myAccountList.length==0" v-cloak>
                <p class="card-content1"><span class="card-price">包月会员</span></p>
                <p class="card-content3">
                    <span>￥20元/月</span>
                </p>
                <p>成为包月会员，享受更多优质服务</p>
            </div>
            <div class="card" v-else v-for="item in myAccountList" :key="item.invalidTime" :class="item.valid == true? 'card-valid-t':'card-valid-f'">
                <p class="card-content1"><span class="card-price">{{item.membershipCode | fil}}</span></p>
                <p class="card-content3">
                    <span>￥{{item.membershipCost}}元/月</span>
                </p>
                <p class="card-content3"><span class="renew" @click="openMonth(item.membershipCode)">续费 &gt;</span><span class="stop-time">有效期至：{{item.invalidTime | filTime}}</span></p>
            </div>
            <div class="upmon-pay">
                <span class="upmon">升级VIP</span><span @click="$router.push('/pay-history')">支付记录</span>
            </div>
        </div>
        <div class="mon-privilege">
            <p class="mon-header">包月会员特权</p>
            <p class="mon-privilege-content">开通后，VIP会员享受最全面的优质服务，包月会员享受绝大部分优质服务，注册会员只能享受基本服务哦~</p>
        </div>
        <div class="mon-detail">
            <p class="mon-detail-header">会员说明</p>
            <div class="month-member">
                <p class="month-member-header">包月会员</p>
                <ul class="month-member-content">
                    <li>1.每天可免费查看<span>10</span>个条款的综合评价</li>
                    <li>2.每月可免费生成<span>3</span>个条款的经典版报告</li>
                    <li>3.在线问专家与线下问专家均永久<span>8</span>折</li>
                    <li>4.赠送一次在线问专家的机会</li>
                </ul>
            </div>
            <div class="month-mon-member">
                <p class="month-mon-member-header">包月VIP会员</p>
                <ul class="month-mon-member-content">
                    <li>1.每天可免费查看<span>30</span>个条款的综 合评价</li>
                    <li>2.每月可免费生成<span>2</span>个条款的尊享版报告（敬请期待）</li>
                    <li>3.每月可免费生成<span>4</span>个条款的经典版报告</li>
                    <li>4.可提供最适合的产品推荐（敬请期待）</li>
                    <li>5.在线问专家与线下问专家均永久<span>7</span>折</li>
                    <li>6.赠送一次在线问专家的机会</li>
                </ul>
            </div>
            <div class="registered-member">
                <p class="registered-member-header">注册会员</p>
                <ul class="registered-member-content">
                    <li>1.每天可免费查看<span>2</span>个条款的综合评价</li>
                    <li>2.经典版条款报告<span>5</span>元/份</li>
                    <li>3.尊享版条款报告<span>10</span>元/份</li>
                </ul>
            </div>
        </div>
        <div class="open-month" @click="openMonth()" v-if="myAccountList.length==0">开通包月</div>
    </div>
</div>
</template>

<script>
export default {
    name: 'my-account',
    data() {
        return {
            mon: true,
            myAccountList: [] //我的账户类型list
        }
    },
    mounted() {
        // 为方便调试把this暴露在window对象下
        this.$pages.myAccount = this;
    },
    activated() {
        document.title = '我的账户';
        this.postMyAccount();
    },
    deactivated() {
        this.mon = true;
        this.myAccountList = []
    },
    methods: {
        // 获取我的账户数据
        postMyAccount() {
            // 获取用户ID
            let customerId = this.$util.getCustomerId();
            if (!customerId) {
                return;
            }
            var that = this;
            this.$util.ajax(`/customer/account`, 'post', {
                customerId: customerId
            }).then(function(data) {
                console.log('我的账户');
                console.log(data);
                if (data.code == "100000") {
                    that.myAccountList = data.data;
                }
            }).catch(function(res) {
                console.log(res);
            });
        },
        // 开通包月按钮
        openMonth(value) {
            if (value == 'DAY') {
                this.$router.push('/pay-day');
            } else {
                this.$router.push('/pay-month');
            }
        }
    },
    filters: {
        fil(value) {
            switch (value) {
                case "MONTH":
                    return value = "包月会员"
                    break;
                case "DAY":
                    return value = "包天会员"
                    break;
                default:
                    break;
            }
        },
        filTime(value) {
            var date = new Date(value);
            var y = 1900 + date.getYear();
            var m = "0" + (date.getMonth() + 1);
            var d = "0" + date.getDate();
            return y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length);
        }
    }
}
</script>

<style scoped>
.my-account.abs.full {
    background-color: #fff;
}


/* 会员卡 */

.card {
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 4% 10%;
    margin: 6% 0;
    font-size: .3rem;
    color: rgba(255, 255, 255, 1);
}

.card-valid-t {
    background: url(./image/card.png) no-repeat;
    -webkit-background-size: 90% auto;
    -webkit-background-position: center;
    background-size: 85% auto;
    background-position: center;
}

.card-valid-f {
    background: url(./image/over-time.png) no-repeat;
    -webkit-background-size: 90% auto;
    -webkit-background-position: center;
    background-size: 85% auto;
    background-position: center;
}

.card p {
    margin: 4% auto;
}

.card-price {
    font-size: .7rem;
}

.card .renew {
    color: #7EFD95;
}

.card-content3 {
    position: relative;
}

.stop-time {
    position: absolute;
    right: 0;
}

.card .card-content2 span {
    margin-right: .15rem;
}

.upmon-pay {
    margin: -.35rem 0 .35rem;
    position: relative;
    font-size: .35rem;
    color: #1140ED;
    text-align: right;
}

.upmon-pay span {
    margin-right: .55rem;
}

.upmon {
    display: none;
}


/* 包月会员特权 */

.mon-privilege {
    background: url(./image/vip-privilege.png) no-repeat;
    background-size: 92% auto;
    -webkit-background-size: 92% auto;
    -webkit-background-position: center;
    background-position: center;
    font-size: .3rem;
    padding: 15% 15% 1%;
    line-height: .7rem;
}

.mon-header {
    text-align: center;
    margin: 0;
    margin-top: -1rem;
    color: #fff;
}

.mon-privilege-content {
    padding-bottom: .2rem;
    text-align: justify;
}


/* 详细说明 */

.mon-detail {
    background-color: #fff;
    margin-top: .3rem;
}

.mon-detail .mon-detail-header {
    text-align: center;
    background-color: #F6F5F8;
    line-height: 1rem;
    font-size: .35rem;
    font-weight: 600;
    margin: 0;
}

.month-member,
.month-mon-member,
.registered-member {
    box-sizing: border-box;
    padding: 0 .35rem;
    font-size: .3rem;
    line-height: .6rem;
    margin-top: .35rem;
}

.registered-member {
    margin-bottom: .7rem;
}

.month-member-header,
.month-mon-member-header,
.registered-member-header {
    color: #2165C5;
    margin: 0;
    font-size: .35rem;
}

.month-member-content,
.month-mon-member-content,
.registered-member-content {
    list-style: none;
    margin: 0;
    padding: 0;
}

.open-month {
    text-align: center;
    line-height: .7rem;
    height: .7rem;
    color: #fff;
    width: 80%;
    border-radius: .35rem;
    margin: 0 auto .7rem;
    background-color: #559AF0;
    font-size: .3rem;
}
</style>
